<template lang="">
    <div>
        <el-dialog :before-close="cancel" center :title="isAdd ? '添加商品规格' : '修改商品规格'"  :visible.sync="isShow">
       <el-form :model="specsForm" :rules="rules" ref="specsForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="规格名称" prop="specsname">
    <el-input v-model="specsForm.specsname"></el-input>
  </el-form-item>
    <el-form-item label="规格属性"  v-for="(item, index) in attrArr">
    <el-input class="inp" v-model="item.value"   autocomplete="off"></el-input>
    <el-button 
          v-if="index == 0" type="primary" @click="addAttr"
          >新增规格属性</el-button>
          <el-button v-else type="danger" @click="del(index)">删除</el-button>
  </el-form-item>
          <el-form-item  label="状态">
   <el-switch
    v-model="specsForm.status"
    active-color="#13ce66"
    inactive-color="#ff4949" 
    :active-value="1"
    :inactive-value="2">
  </el-switch>
</el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </div>
  </el-dialog>
    </div>
</template>
<script>
import { specsAdd, specsInfo, specsEdit } from '../../request/api'
import { mapActions } from 'vuex';
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            specsForm: {
                specsname: "", //商品规格名称
                attrs: "", //规格属性值
                status: 1, //状态1正常2禁用
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            formLabelWidth: '120px',
            // 设置一个空数组，用于循环动态input
            attrArr: [
                {
                    value: "",
                }
            ]
        }
    },
    methods: {
        // 封装一个动态添加表单想的事件
        addAttr() {
            if (this.attrArr.length > 6) {
                this.$message.warning("最多添加6条");
            } else {
                this.attrArr.push({
                    value: ""
                })
            }
        },
        del(i) {
            this.attrArr.splice(i, 1)
        },
        ...mapActions({
            getSpece: "specs/getSpecsListAction",
            getCount: "specs/getCountAction"
        }),
        // 取消
        cancel() {
            this.$emit('cancel', false)
            // 调用清空事件
            this.reset()
        },
        // 封装一个清空事件
        reset() {
            this.specsForm = {
                specsname: "", //商品规格名称
                attrs: "", //规格属性值
                status: 1, //状态1正常2禁用
            },
                // 调用清空验证的方法
                this.$refs.specsForm.resetFields();
            // 清空表单动态表单项
            this.attrArr = [
                {
                    value: "",
                }
            ]
        },
        //封装一个查询一条数据的接口
        lookup(id) {
            specsInfo({ id }).then((res) => {
                if (res.code == 200) {
                    this.specsForm = res.list[0];
                    this.specsForm.id = id;
                    /* 
         后端返回的数据格式：
         attrs: ["红", "黄", "蓝"]
         但是我们前端展示的时候 需要的数据格式
         this.attrArr :[
       {
         value: "",
       },
     ] */
                    this.specsForm.attrs.map((item, index) => {
                        console.log(item, "每一项属性");
                        if (index == 0) {
                            this.attrArr[0].value = item
                        } else {
                            this.attrArr.push({
                                value: item,
                            })
                        }
                    })
                }
            })
        },
        // 封装一个确定事件
        confirm() {
            this.$refs.specsForm.validate((val) => {
                if (val) {
                    /* 
           目前规格属性的格式是：
           this.attrArr = [{value:'1'},{value:'2'},{value:'3'}...]
           后端想要的数据格式是 '1,2,3'
           思路：
           1、先生成一个数组，map
           2、join 拼接成','分割的字符串
           */
                    this.specsForm.attrs = this.attrArr.map((item) => item.value).join(",");
                    if (this.isAdd) {
                        // console.log(this.attrArr, '规格属性');
                        // console.log(this.specsForm, '表单对象');
                        specsAdd(this.specsForm).then((res) => {
                            // console.log(res, '规格响应');
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.cancel();
                                // 重新调用接口；列表以及总数
                                this.getSpece();
                                this.getCount();
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        // console.log('编辑接口');
                        specsEdit(this.specsForm).then((res) => {
                            // console.log(res, '规格响应');
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.cancel();
                                // 重新调用接口；列表以及总数
                                this.getSpece();
                                this.getCount();
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                } else {
                    this.$message.error("验证失败");
                    return false;
                }
            })
        },
    },

}
</script>
<style lang="less" scoped>
.inp {
    width: 75%;
}
</style>